import { Metadata } from "next";
import Link from "next/link";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Clock, Tag, User, Filter, ArrowRight, Calendar } from "lucide-react";

export const metadata: Metadata = {
  title: "博客 | bgactor AI Agents",
  description: "探索bgactor的AI技术洞见、行业趋势和最佳实践",
};

// 模拟文章数据
const blogPosts = [
  {
    id: 1,
    title: "构建自主AI代理: 技术挑战与解决方案",
    excerpt: "探索在创建真正自主的企业级AI代理时的关键技术挑战，以及我们的突破性解决方案。",
    coverImage: "/images/blog/blog-1.jpg",
    date: "2024-03-05",
    author: {
      name: "Dr. Sarah Chen",
      avatar: "/images/team/placeholder.png",
      role: "CEO & AI研究主管"
    },
    category: "技术",
    tags: ["AI代理", "机器学习", "企业应用"],
    readTime: "7 分钟",
    featured: true
  },
  {
    id: 2,
    title: "AI代理如何变革金融服务业",
    excerpt: "了解领先金融机构如何部署AI代理来优化风险评估、客户服务和市场分析。",
    coverImage: "/images/blog/blog-2.jpg",
    date: "2024-02-28",
    author: {
      name: "James Wilson",
      avatar: "/images/team/placeholder.png",
      role: "CTO"
    },
    category: "行业解决方案",
    tags: ["金融科技", "风险管理", "客户服务"],
    readTime: "5 分钟",
    featured: false
  },
  {
    id: 3,
    title: "企业AI实施的5个关键策略",
    excerpt: "成功采用企业级AI需要清晰的策略。我们分享了从数百次成功部署中获得的经验教训。",
    coverImage: "/images/blog/blog-3.jpg",
    date: "2024-02-15",
    author: {
      name: "Mei Zhang",
      avatar: "/images/team/placeholder.png",
      role: "产品副总裁"
    },
    category: "最佳实践",
    tags: ["企业策略", "实施", "变革管理"],
    readTime: "9 分钟",
    featured: false
  },
  {
    id: 4,
    title: "强化学习在企业AI代理中的应用",
    excerpt: "深入了解我们如何使用强化学习来创建随时间改进的自适应AI代理。",
    coverImage: "/images/blog/blog-4.jpg",
    date: "2024-02-01",
    author: {
      name: "Dr. Kiran Patel",
      avatar: "/images/team/placeholder.png",
      role: "首席AI科学家"
    },
    category: "技术",
    tags: ["强化学习", "自适应AI", "算法"],
    readTime: "11 分钟",
    featured: false
  },
  {
    id: 5,
    title: "医疗保健行业AI代理使用案例",
    excerpt: "从患者护理到医疗研究，AI代理正在医疗保健行业创造前所未有的价值。",
    coverImage: "/images/blog/blog-5.jpg",
    date: "2024-01-20",
    author: {
      name: "Dr. Sarah Chen",
      avatar: "/images/team/placeholder.png",
      role: "CEO & AI研究主管"
    },
    category: "行业解决方案",
    tags: ["医疗保健", "患者护理", "医学研究"],
    readTime: "6 分钟",
    featured: false
  },
  {
    id: 6,
    title: "AI代理与人类协作的未来",
    excerpt: "我们如何设计AI系统来补充人类能力，而不是取代它们。探索人类与AI的协作未来。",
    coverImage: "/images/blog/blog-6.jpg",
    date: "2024-01-10",
    author: {
      name: "James Wilson",
      avatar: "/images/team/placeholder.png",
      role: "CTO"
    },
    category: "思想领导力",
    tags: ["未来工作", "人机协作", "AI伦理"],
    readTime: "8 分钟",
    featured: true
  }
];

// 提取所有唯一标签和分类
const allTags = Array.from(new Set(blogPosts.flatMap(post => post.tags)));
const allCategories = Array.from(new Set(blogPosts.map(post => post.category)));

export default function BlogPage() {
  const featuredPosts = blogPosts.filter(post => post.featured);
  
  return (
    <div className="flex flex-col min-h-screen bg-slate-950">
      {/* Hero Section */}
      <section className="w-full py-12 md:py-24 bg-gradient-to-r from-slate-900 to-indigo-950">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center space-y-4 text-center">
            <div className="space-y-2">
              <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none text-white">
                技术洞见与 <span className="text-[#50E3C2]">AI趋势</span>
              </h1>
              <p className="mx-auto max-w-[700px] text-zinc-200 md:text-xl">
                探索我们的专家团队对AI代理技术、行业趋势和实际应用的最新思考和见解。
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Featured Posts Section */}
      {featuredPosts.length > 0 && (
        <section className="w-full py-12 md:py-24 bg-slate-950">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center space-y-4 text-center mb-10">
              <div className="space-y-2">
                <h2 className="text-3xl font-bold text-white">精选文章</h2>
                <p className="mx-auto max-w-[700px] text-zinc-400 md:text-lg">
                  深入了解我们的专家团队的思想领导力和最新洞见。
                </p>
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              {featuredPosts.map((post) => (
                <Card key={post.id} className="bg-slate-900/50 border-slate-800 backdrop-blur-sm overflow-hidden hover:border-[#50E3C2]/50 transition-colors">
                  <div className="aspect-video relative bg-slate-800/50">
                    <div className="flex items-center justify-center h-full bg-gradient-to-br from-indigo-900/30 to-indigo-800/10">
                      <Calendar className="h-16 w-16 text-[#50E3C2] opacity-20" />
                    </div>
                  </div>
                  <CardHeader>
                    <div className="flex items-center justify-between">
                      <Badge className="bg-indigo-500 hover:bg-indigo-500/90 px-2 py-0.5">
                        {post.category}
                      </Badge>
                      <div className="flex items-center text-zinc-400 text-sm">
                        <Clock className="h-4 w-4 mr-1" />
                        <span>{post.readTime}</span>
                      </div>
                    </div>
                    <CardTitle className="text-white text-2xl mt-2">
                      <Link href={`/blog/${post.id}`} className="hover:text-[#50E3C2] transition-colors">
                        {post.title}
                      </Link>
                    </CardTitle>
                    <CardDescription className="text-zinc-400">
                      {post.excerpt}
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="flex flex-wrap gap-2">
                      {post.tags.map((tag) => (
                        <Badge key={tag} variant="outline" className="text-zinc-400 border-zinc-700">
                          {tag}
                        </Badge>
                      ))}
                    </div>
                  </CardContent>
                  <CardFooter className="border-t border-slate-800 flex items-center justify-between">
                    <div className="flex items-center space-x-2">
                      <div className="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center">
                        <User className="h-4 w-4 text-[#50E3C2]" />
                      </div>
                      <div className="text-sm">
                        <p className="text-white">{post.author.name}</p>
                        <p className="text-zinc-500">{post.date}</p>
                      </div>
                    </div>
                    <Link href={`/blog/${post.id}`} className="text-[#50E3C2] hover:text-[#3AC4A5] text-sm flex items-center">
                      阅读更多 <ArrowRight className="ml-1 h-4 w-4" />
                    </Link>
                  </CardFooter>
                </Card>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* All Posts Section with Filtering */}
      <section className="w-full py-12 md:py-24 bg-gradient-to-b from-slate-950 to-slate-900">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center space-y-4 text-center mb-8">
            <div className="space-y-2">
              <h2 className="text-3xl font-bold text-white">全部文章</h2>
              <p className="mx-auto max-w-[700px] text-zinc-400 md:text-lg">
                浏览我们关于AI代理、行业趋势和技术实现的完整文章集合。
              </p>
            </div>
          </div>

          <Tabs defaultValue="all" className="w-full mb-8">
            <div className="flex items-center justify-between mb-6 flex-col sm:flex-row gap-4">
              <TabsList className="bg-slate-900/80 p-1">
                <TabsTrigger value="all" className="data-[state=active]:bg-indigo-900">全部</TabsTrigger>
                {allCategories.map((category) => (
                  <TabsTrigger 
                    key={category} 
                    value={category}
                    className="data-[state=active]:bg-indigo-900"
                  >
                    {category}
                  </TabsTrigger>
                ))}
              </TabsList>
              
              <div className="flex items-center space-x-2 bg-slate-900/80 rounded-md p-2">
                <Filter className="h-4 w-4 text-zinc-400" />
                <span className="text-zinc-400 text-sm">标签过滤:</span>
                <div className="flex flex-wrap gap-1">
                  {allTags.slice(0, 3).map((tag) => (
                    <Badge key={tag} variant="outline" className="text-zinc-400 border-zinc-700 cursor-pointer hover:bg-slate-800">
                      {tag}
                    </Badge>
                  ))}
                  <Badge variant="outline" className="text-zinc-400 border-zinc-700 cursor-pointer hover:bg-slate-800">
                    更多...
                  </Badge>
                </div>
              </div>
            </div>

            <TabsContent value="all" className="mt-0">
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {blogPosts.map((post) => (
                  <Card key={post.id} className="bg-slate-900/50 border-slate-800 hover:border-[#50E3C2]/30 transition-colors">
                    <div className="aspect-video relative bg-slate-800/50">
                      <div className="flex items-center justify-center h-full bg-gradient-to-br from-indigo-900/30 to-indigo-800/10">
                        <Calendar className="h-12 w-12 text-[#50E3C2] opacity-20" />
                      </div>
                    </div>
                    <CardHeader className="pb-2">
                      <div className="flex justify-between items-center mb-1">
                        <Badge className="bg-indigo-900/80 hover:bg-indigo-800 text-white">
                          {post.category}
                        </Badge>
                        <div className="flex items-center text-zinc-500 text-xs">
                          <Clock className="h-3 w-3 mr-1" />
                          <span>{post.readTime}</span>
                        </div>
                      </div>
                      <CardTitle className="text-white text-lg">
                        <Link href={`/blog/${post.id}`} className="hover:text-[#50E3C2] transition-colors">
                          {post.title}
                        </Link>
                      </CardTitle>
                    </CardHeader>
                    <CardContent className="pb-2">
                      <p className="text-zinc-400 text-sm line-clamp-2">
                        {post.excerpt}
                      </p>
                      <div className="flex flex-wrap gap-1 mt-3">
                        {post.tags.slice(0, 2).map((tag) => (
                          <Badge key={tag} variant="outline" className="text-xs text-zinc-500 border-zinc-800">
                            {tag}
                          </Badge>
                        ))}
                        {post.tags.length > 2 && (
                          <Badge variant="outline" className="text-xs text-zinc-500 border-zinc-800">
                            +{post.tags.length - 2}
                          </Badge>
                        )}
                      </div>
                    </CardContent>
                    <CardFooter className="border-t border-slate-800 pt-3 flex items-center justify-between">
                      <div className="flex items-center space-x-2">
                        <div className="w-6 h-6 rounded-full bg-slate-700 flex items-center justify-center">
                          <User className="h-3 w-3 text-[#50E3C2]" />
                        </div>
                        <span className="text-zinc-400 text-xs">{post.author.name}</span>
                      </div>
                      <span className="text-zinc-500 text-xs">{post.date}</span>
                    </CardFooter>
                  </Card>
                ))}
              </div>
            </TabsContent>

            {allCategories.map((category) => (
              <TabsContent key={category} value={category} className="mt-0">
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                  {blogPosts
                    .filter((post) => post.category === category)
                    .map((post) => (
                      <Card key={post.id} className="bg-slate-900/50 border-slate-800 hover:border-[#50E3C2]/30 transition-colors">
                        <div className="aspect-video relative bg-slate-800/50">
                          <div className="flex items-center justify-center h-full bg-gradient-to-br from-indigo-900/30 to-indigo-800/10">
                            <Calendar className="h-12 w-12 text-[#50E3C2] opacity-20" />
                          </div>
                        </div>
                        <CardHeader className="pb-2">
                          <div className="flex justify-between items-center mb-1">
                            <Badge className="bg-indigo-900/80 hover:bg-indigo-800 text-white">
                              {post.category}
                            </Badge>
                            <div className="flex items-center text-zinc-500 text-xs">
                              <Clock className="h-3 w-3 mr-1" />
                              <span>{post.readTime}</span>
                            </div>
                          </div>
                          <CardTitle className="text-white text-lg">
                            <Link href={`/blog/${post.id}`} className="hover:text-[#50E3C2] transition-colors">
                              {post.title}
                            </Link>
                          </CardTitle>
                        </CardHeader>
                        <CardContent className="pb-2">
                          <p className="text-zinc-400 text-sm line-clamp-2">
                            {post.excerpt}
                          </p>
                          <div className="flex flex-wrap gap-1 mt-3">
                            {post.tags.slice(0, 2).map((tag) => (
                              <Badge key={tag} variant="outline" className="text-xs text-zinc-500 border-zinc-800">
                                {tag}
                              </Badge>
                            ))}
                            {post.tags.length > 2 && (
                              <Badge variant="outline" className="text-xs text-zinc-500 border-zinc-800">
                                +{post.tags.length - 2}
                              </Badge>
                            )}
                          </div>
                        </CardContent>
                        <CardFooter className="border-t border-slate-800 pt-3 flex items-center justify-between">
                          <div className="flex items-center space-x-2">
                            <div className="w-6 h-6 rounded-full bg-slate-700 flex items-center justify-center">
                              <User className="h-3 w-3 text-[#50E3C2]" />
                            </div>
                            <span className="text-zinc-400 text-xs">{post.author.name}</span>
                          </div>
                          <span className="text-zinc-500 text-xs">{post.date}</span>
                        </CardFooter>
                      </Card>
                    ))}
                </div>
              </TabsContent>
            ))}
          </Tabs>

          <div className="flex justify-center mt-8">
            <Button variant="outline" className="border-[#50E3C2] text-[#50E3C2] hover:bg-[#50E3C2]/10">
              加载更多文章
            </Button>
          </div>
        </div>
      </section>

      {/* Newsletter Signup */}
      <section className="w-full py-12 md:py-24 bg-gradient-to-r from-indigo-900 to-indigo-950">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center space-y-4 text-center">
            <div className="space-y-2">
              <h2 className="text-3xl font-bold text-white">订阅我们的通讯</h2>
              <p className="mx-auto max-w-[700px] text-zinc-200 md:text-xl">
                获取AI代理技术的最新洞见和趋势，直接发送到您的收件箱。
              </p>
            </div>
            <div className="w-full max-w-md flex gap-2 mt-4">
              <input 
                type="email" 
                placeholder="your.email@company.com" 
                className="flex-1 rounded-lg bg-slate-800 border border-slate-700 text-white px-4 py-2 focus:outline-none focus:ring-2 focus:ring-[#50E3C2]"
              />
              <Button className="bg-[#50E3C2] text-slate-900 hover:bg-[#3AC4A5]">
                订阅
              </Button>
            </div>
            <p className="text-zinc-400 text-sm">
              我们尊重您的隐私，不会分享您的信息。
            </p>
          </div>
        </div>
      </section>
    </div>
  );
} 